import { hideToast } from '@/store/toastSlice'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import './toast.less'
export default function MyToast() {
    // const [text, setText] = useState('默认信息')
    const { type, text, show } = useSelector((state: RootState) => state.toast)
    const [bgc, setBgc] = useState('red')
    useEffect(() => {
        if (type == 'success') {
            setBgc('green')
        } else if (type === 'err') {
            setBgc('red')
        }
    }, [type])

    const dispatch = useDispatch()
    if (show) {
        setTimeout(() => {
            dispatch(hideToast())
        }, 1500)
    }


    // const [show, setShow] = useState(false)
    // 显示一个设计图相似的 弹出层
    return <div className='toast' style={{ backgroundColor: bgc, display: show ? 'block' : 'none' }}>
        {text}
    </div>
}